<!--  -->
<template>
  <!-- 顶部导航 -->
  <div id="categoryList">
    <van-nav-bar
      title="商品列表"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    />
    <van-tabs v-model="tabActive" swipeable animated @click="clickTab">
      <van-tab class="tabList" v-for="(tab, index) in tabList" 
      :key="index" 
      :title="tab.name">
      <h3>{{tab.name}}</h3>
      <p>{{tab.front_name}}</p>
      </van-tab>
    </van-tabs>

    <!-- 商品列表 -->
    <van-grid :border="false" :column-num="2">
      <van-grid-item class="van-hairline--surround" v-for="(good, index2) in goodList" :key="index2" :to="'/product/'+ good.id" >
        <van-image :src="good.list_pic_url"></van-image> 
        <h4 class="van-ellipsis">{{good.name}}</h4>
        <p class="price">￥{{good.retail_price}}元起</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import axios from 'axios'
// import api from '../assets/config/api'
export default {
  props:['id'],
  data () {
    return {
      tabActive: '',
      allData: [],
      goodList: [],
    }
  },
  methods: {
    clickTab(index) {
      this.tabActive = index
    },
    getList(cid,page) {

    },
    goBack() {
      return this.$router.go(-1)
    }
  },
  computed: {
    tabList() {
      if (this.allData.data) {
        return this.allData.data.brotherCategory
      }else {
        return []
      }
    }
  },
  async created() {
    let res = await axios.get(this.$root.api.GoodsCategory,{params:{id:this.id}})
    this.allData = res.data
    this.clickTab(0)
  },
  watch: {
    tabActive: async function () {
      let id = this.tabList[this.tabActive].id
      let page = 1
      let size = 20
      let res = await axios.get(`${this.$root.api.GoodsList}?categoryId=${id}&page=${page}&size=${size}`)
      this.goodList = res.data.data.goodsList
      
    }
  }
}
</script>

<style lang="less" scoped>
#categoryList{
  text-align: center;
  position: relative;
  p{
    margin: 0;
  }
  h4{
    margin: 0;
  }
  .price{
    color: red;
    font-size: 14px;
    font-weight: 600;
  }
  .van-ellipsis{
    width: 100%;
  }
  .van-grid-item{
    overflow: hidden;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .arrow-left{
    position: absolute;
  }
}

</style>
